<template lang="pug">
  .foot-menu.foot-menu-new(v-if="isShow", :class="{'animated bounceInUp': isShow}")
    Scene
    .foot-menu-wrap.pos-r
      .foot-profile.pos-a
        div.avatar(v-if="getLogoImg")
          .img-box
            img.hand(:src="getLogoImg", alt="" @click.stop="handleLogo")
        .info.fr(v-if="isShowAuthInfo")
          a.name(:href="AuthorUrl ? (AuthorUrl + panoInfo.user_id) : 'javascript:;'", target="_blank")
            strong {{panoInfo.user_nickname}}
          p
            span 作品: {{getWorksCount}}
            span 人气: {{getFormatSeeCount}}

      .foot-body.tac
        ul
          li.hand(v-for="(item, index) in getMidMenuList", :key="index", @click="handleNavClick(item)")
            .img-box
              img(:src="item.image", :alt="item.name")
            .text {{ item.name }}

      .foot-btmenu.pos-a
        .icon-list
          .icon.hand(v-for="(item, index) in getBottomMenu", :key="index", @click="handleBtMenu(item)")
            span.menu-icon
              i.iconfont(:class="item.icon")

          .icon.hand(v-for="menu in rightMenuList",  @click="handleMenuClick(menu)")
            span.menu-icon
              i.iconfont(:class="menu.icon")
</template>

<script>
import Scene from './scene'
import { mapGetters } from 'vuex'
import { handleToolsBar } from '@/utils/menu'
import { visibleAuthor} from '@/utils/krpano'
import themeMixin from '@/mixins/theme'
import menuMixin from '@/mixins/menu'

export default {
  name: 'menuBar',
  mixins: [themeMixin, menuMixin],
  components: {
    Scene
  },
  data() {
    return {
      homeUrl: $globalconfig.URLS.HOME,
      baseUrl: $globalconfig.URLS.API,
      AuthorUrl: $globalconfig.AuthorUrl,
      isShow: false,
      midMenuList: [],
      rightMenuList: [],
      countUnit: 10000
    }
  },
  beforeMount() {
    this.rightMenuList = this.$CONFIG.footRightMenuE
  },
  mounted() {
    this.filterMenu()

    this.$nextTick(() => {
      setTimeout(() => {
        this.isShow = true
      })
    })
  },
  computed: {
    ...mapGetters([
      'panoInfo',
      'worksData',
      'navGuideData'
    ]),
    getFormatSeeCount() {
      if(this.panoInfo) {
        return this.panoInfo.seecount > this.countUnit
          ? Number(this.panoInfo.seecount/this.countUnit).toFixed(1) + 'w'
          : this.panoInfo.seecount
      }
    },
    getWorks() {
      return this.worksData && this.worksData.length > 0 ? true : false
    },
    getNavGuide() {
      return this.navGuideData && this.navGuideData.length > 0  ? true : false
    },
    getLogoImg() {
      if(this.panoInfo && this.panoInfo.logo) {
        return this.baseUrl + this.panoInfo.logo
      }
    },
    getWorksCount() {
      if(this.worksData) {
        return this.worksData.length
      }
    },
    isShowAuthInfo() {
      return visibleAuthor()
    },
    getMidMenuList() {
      return this.midMenuList
    }
  },
  methods: {
    handleLogo() {
      if (this.panoInfo && this.panoInfo.logolink) {
        let url = this.panoInfo.logolink
        if (this.panoInfo.logolink.indexOf('www.') === 0) {
          url = `//${url}`
        }
        // console.log(url)
        window.open(url)
      }
    },
    filterMenu() {
      this.midMenuList = this.$CONFIG.footMidMenuE

      if(!this.getWorks) {
        this.midMenuList = this.midMenuList.filter(item => item.title != 'works')
      }
      if(!this.getNavGuide) {
        this.midMenuList = this.midMenuList.filter(item => item.title != 'navguide')
      }
    },
    handleNavClick(item) {
      handleToolsBar(item)
    },
    handleMenuClick(item) {
      handleToolsBar(item)
    }
  }
}
</script>

<style lang="stylus" scoped>
$white = #fff
.foot-menu-new
  .foot-menu-wrap
    border-top: 1px solid $white
    box-shadow: -2px 0 4px $white
  .foot-profile, .foot-btmenu
    top: 50%
    font-size: 0
    transform: translateY(-50%)
  .foot-profile
    left: 0
    .avatar, .info
      display: inline-block
    .avatar
      padding: 20px 0 20px 20px
      .img-box
        width: 60px
        height: 60px
        border-radius: 50%
        border: 2px solid $white
        overflow: hidden
    .info
      color: $white
      padding-left: 20px
      padding-top: 15px
      text-shadow: 2px -1px 2px #333
      .name
        display: block
        font-size: 18px
        padding: 10px 0
      a
        color: $white
      p
        font-size: 12px
        span
          margin-right: 15px
  .foot-btmenu
    right: 0
    padding-right: 20px
    .icon-list
      padding: 0 20px
      border-radius: 50px
      background-color: rgba($white, .4)
      text-align: center
    .icon
      display: inline-block
      width: 30px
      height: 30px
      line-height: 30px
      padding: 16px 12px
      i
        font-size: 30px
        color: $white

  .foot-body
    li
      display: inline-block
      width: 80px
      padding-top: 10px
      box-sizing: border-box
      .img-box
        width: 50px
        height: 50px
        margin: 0 auto
      .text
        font-size: 14px
        color: $white
        padding: 10px 0
        text-shadow: 2px -1px 2px #333


</style>
